<template>
  <div>
    <!-- 1,action设置后端服务器地址,将来eleui会帮我们发送请求上传图片到指定服务器
    我们不需要上传,将来自己上传,action就不配(会报错) -->
    <!-- 2on-preview点击预览的+号时,就会触发配置的函数(配了这个函数就有+号) -->
    <!-- 3limit配置上传最大数量 -->
    <!-- 4on-remove 当你点击删除时,会触发函数,
    仅仅是结构被删除了,需要自己提供结构 -->
    <!-- 5http-request只有用于配置了这个函数,才能自己发请求上传图片,覆盖默认的上传行为 -->
    <!-- 6on-change 添加文件 上传成功/失败 都会触发这个函数
    注意点,添加成功也是假象,只是结构添加成功了,需要更新数据中的filelist -->
    <!-- 7beforeUpload会在上传文件前执行,如果返回false则返回,停止上传-->
    <el-upload
      :class="{disabled:disabled}"
      action="#"
      list-type="picture-card"
      :file-list="filelist"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :limit="limit"
      :http-request="handleUpload"
      :on-change="handleChange"
      :before-upload="handleBeforeUpload"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <!-- 进度条 -->
    <!-- <el-progress :text-inside="true" :stroke-width="26" :percentage="percentage" style="width:300px" /> -->
    <!-- 预览的弹窗 -->
    <el-dialog title="预览图片" :visible="show" @close="show=false">
      <img :src="ingSrc" alt="" style="width:100%">
    </el-dialog>
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5' // 导入腾讯云的包(sdk)
// 这个cos实例可以用于发请求存储桶,且已经验证身份(私有写的意义)
const cos = new COS({
  SecretId: 'AKID5yaw1pLbFdjY5LK1XonVwub1B4f05yax', // 身份识别ID
  SecretKey: '8zMepjMnETRAeqmSs41jCPO9euvkKgmc' // 身份秘钥
})
console.log(cos)
export default {
  name: 'InageUoload',
  props: {
    limit: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      // 没上传要做预览,需要给默认数据
      filelist: [],
      show: false,
      ingSrc: ''
      // percentage: 0
    }
  },

  computed: {
    disabled() {
      return this.filelist.length >= this.limit
    },
    isAllUpLoadSuccess() {
      return this.filelist.every(item => item.status === 'success')
    }
  },
  methods: {
    handlePictureCardPreview(file) {
      // console.log(file)
      this.show = true
      this.ingSrc = file.url
    },
    handleRemove(file, fileList) {
      // file=>删除的文件
      // fileList=>文件列表指的是页面结构中的!!!!!(已经跟新,视图更新不会影响数据)
      // this.filelist我们的数据(没有更新)
      console.log(file, fileList, this.filelist)
      this.filelist = this.filelist.filter(item => item.uid !== file.uid)
      // 直接利用结构中的列表进行同步,(引用问题)
      // this.filelist = [...fileList]
    },
    handleBeforeUpload(file) {
      // file => 选择上传的文件
      //  const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        // 停止上传
        return false
      }
      // return isJPG && isLt2M;
      // 校验通过 可以上传
      return true
    },

    handleUpload(obj) {
      // obj.file=>将来要上传的文件
      // 找到需要更新的文件对象
      const fileObj = this.filelist.find(item => item.uid === obj.file.uid)
      console.log('准备上传', obj.file)
      // 开始上传前 开启loading
      fileObj.status = 'uploading'
      // 这里可以用cos上传图片
      cos.putObject({
        Bucket: 'hrsass-95-hbnb-1312315649', // 存储桶名字
        Region: 'ap-shanghai', // 存储桶所在地域
        Key: parseInt(Math.random() * 999) + obj.file.name, // 存储在桶里的文件
        StorageClass: 'STANDARD', // 默认标准存储
        Body: obj.file, // 即将上传的文件对象
        // 执行时机:每上传一点点图片,就会触发执行一次
        onProgress: (progressData) => {
          console.log(JSON.stringify(progressData))
          // this.percentage = parseInt(progressData.percent * 100)
          fileObj.percentage = parseInt(progressData.percent * 100)
        }
      }, (err, data) => {
        // 这里必须是箭头函数!!!!this指向组件
        // console.log(err || data)
        if (err) {
          console.log(err)
          return
        }
        console.log(data)

        // 更新临时地址,换成真实地址
        fileObj.url = 'https://' + data.Location
        setTimeout(() => {
          // 跟新上传的状态
          fileObj.status = 'success'
        }, 300)
      })
    },
    handleChange(file, fileList) {
      // file => 添加的文件
      // fileList => 结构中的fileList(已经更新)
      // this.filelist=>数据中的fileList 待更新
      this.filelist = [...fileList]
    }

  }
}
</script>

<style lang="scss" scoped>
.disabled{
 ::v-deep{
    .el-upload--picture-card{
display: none;
  }
 }
}

</style>
